<template>
  <div class="main">
    <!--轮播图-->
    <el-carousel height="300px">
      <el-carousel-item v-for="item in slideshowList" :key="item.id">
        <img :src="`/src/assets/banner/${item.path}.jpg`" alt="" width="100%" height="100%"
             @click="router.push(`/banner/${item.id}`)"
        >
      </el-carousel-item>
    </el-carousel>
    <!--公告-->
    <div class="message">
      <img src="../assets/icon/message1.png" alt=""/>
      <ul>
        <li v-for="item in messageTitleList" @click="nextById(item.id)">{{ item.title }}</li>
      </ul>
      <img src="../assets/icon/message2.png" alt="" @click="next({path:'/messageAll'})"/>
    </div>
    <!--菜单-->
    <div class="menuIcons">
      <div class="menuIcon" v-for="item in menuList" :key="item.id" @click="next(item)">
        <img :src="`/src/assets/icon/${item.url}.png`" alt="" />
        <span>{{ item.name }}</span>
      </div>
    </div>
    <div class="coin" @click="next({path:'/fabi'})">
      <img src="../assets/icon/p11.png" alt="" />
      <span>快捷买币</span>
      <span>></span>
    </div>
    <!--涨幅榜-->
    <div class="tags">
      <el-tabs stretch>
        <el-tab-pane v-for="item in tagList" :key="item.id" :label="item.title">
          <template #label>
      <span :style="{ color: item.id == 1 ? 'red' : '#409eff' }">
        <img v-if="!isSorted && item.id === 1" src="../assets/icon/star1.png" alt="" style="width: 20px" @click="sortABC">
        <img v-else-if="isSorted && item.id === 1" src="../assets/icon/star2.png" alt="" style="width: 20px" @click="sortABC">
        {{ item.title }}
      </span>
          </template>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div style="padding-bottom: 100px;">
      <el-table
          :data="dataList"
          @sort-change="priceSort"
      >
        <el-table-column label="币种/交易量" prop="name">
          <template #default="{ row }">
            <div style="display: flex">
              <img
                :src="'/src/' + row.img"
                alt=""
                style="width: 30px; height: 30px"
              />
              <div style="font-size: 12px; line-height: 15px; margin-left: 5px">
                <div>{{ row.englishName }}</div>
                <div>{{ row.total }}亿</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="价格">
          <template #default="{ row }">
            <div style="font-size: 12px; line-height: 15px">
              <div>${{ row.price / 7}}</div>
              <div>￥{{ row.price }}</div>
            </div>
          </template>
        </el-table-column>
<!--        <el-table-column-->
<!--            label="涨跌幅"-->
<!--            prop="priceIncrease"-->
<!--            width="100px"-->
<!--            sortable-->
<!--        >-->
        <el-table-column
          label="涨跌幅"
          prop="upAndDown"
          width="100px"
          sortable="custom"
        >
          <template #default="{ row }">
            <div
              :style="{ color: row.upAndDown[0] == '+' ? 'red' : 'green' }"
            >
              {{ row.upAndDown }}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { menuList, tagList } from "../data.ts";
import { useRouter } from 'vue-router'; // 导入 useRouter
import { getAllCurrency, getMessageAll, getSlideshow } from "../apis/api";
import { ref, reactive, onMounted } from "vue";
const isSorted = ref(false);
const router = useRouter(); // 获取 router 实例

// 携带参数的路由
const nextById = (messageId) => {
  router.push({ path: '/message/'+messageId });
};

// 不携带参数的路由
const next = (item) => {
  router.push( item.path );
};

const indexImgNumber = ref<number>(0);

// 设置3秒一轮播
setInterval(() => {
  indexImgNumber.value += 1;
  if (indexImgNumber.value > messageTitleList.value.length - 1) {
    indexImgNumber.value = 0;
  }
  document.querySelectorAll(".message>ul>li").forEach((item: any) => {
    item.style.top = `${indexImgNumber.value * -40}px`;
  });
}, 3000);


// 获取货币信息
//import {dataList} from '../data.ts'
// 获取货币信息
var dataList = ref<any[]>([]);
const getCurrency = () =>
  getAllCurrency().then(res => {
    dataList.value = res.data.data;
  })

// 获取通告标题
let messageTitleList = ref<any[]>([]);
const messagetitle = () =>
    getMessageAll().then(res => {
      messageTitleList.value = res.data.data;
    })

// 获取轮播图
let slideshowList = ref<any[]>([]);
const slideshow = () =>
  getSlideshow().then(res => {
    console.log(res)
    slideshowList.value = res.data.data;

  })

// 在页面加载时调用方法
onMounted(() => {
  getCurrency();
  messagetitle();
  slideshow();
});


// 自定义排序函数
const priceSort = ({ prop, order }) => {
  console.log(prop + "  " + order)
  dataList.value.sort((a, b) => {
    if (order === 'ascending') {
      return compare(a[prop], b[prop]);
    } else if (order === 'descending') {
      return compare(b[prop], a[prop]);
    }
    return 0;
  })
};

// 比较函数
const compare = (a, b) => {
  if (parseFloat(a) < parseFloat(b)) {
    return 1;
  } else if (parseFloat(a) > parseFloat(b)) {
    return -1;
  } else {
    return 0;
  }
};


const sortABC = () => {
  if (!isSorted.value) {
    // 按照 englishName 属性的字母顺序进行排序
    dataList.value.sort((a, b) => {
      // 将 englishName 转换为小写进行比较，以实现不区分大小写的排序
      const nameA = a.name.toLowerCase();
      const nameB = b.name.toLowerCase();

      if (nameA < nameB) {
        return -1; // a 应该排在 b 前面
      } else if (nameA > nameB) {
        return 1; // b 应该排在 a 前面
      } else {
        return 0; // a 和 b 相等，顺序不变
      }
    });
    isSorted.value = !isSorted.value; // 切换排序状态
  }
  else {
    getCurrency();
    isSorted.value = !isSorted.value; // 切换排序状态
  }
}
</script>

<style scoped lang="scss">
.main {

  .index-img {
    width: 100%;
    height: auto;
    display: flex;
    position: relative;
    transition: all 1s ease;
    left: 0px;

    > img {
      width: calc(100% - 10px);
      margin: 5px;
      border-radius: 10px;
    }
  }

  .menuIcons {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .menuIcon {
      width: 100px;
      display: flex;
      align-items: center;
      flex-direction: column;
      margin-top: 10px;
      transition: all 0.3s ease-in-out;
      cursor: pointer;
      color: #409fef;

      > img {
        width: 40px;
        height: 40px;
      }
    }

    .menuIcon:hover {
      color: orange;
    }
  }

  .coin {
    margin-left: 2%;
    width: 90%;
    padding: 5px 5px 5px 15px;
    height: 35px;
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 10px;
    background-color: #f0f8ff;

    img {
      width: 30px;
    }

    :nth-child(3) {
      position: absolute;
      right: 10px;
    }
  }

  .tags {
    width: 100%;
    display: flex;
    > img {
      width: 25px;
      height: 25px;
    }
    .el-tabs {
      width: 100%;
    }
  }
}
.message {
  width: 100%;
  height: 40px;
  display: flex;
  color: rgb(155, 155, 155);

  > ul {
    width: 90%;
    list-style-type: none;
    overflow: hidden;
    position: relative;

    li {
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 40px;
      position: relative;
      transition: all 1s ease-in-out;
      top: 0;
    }
  }

  > img {
    width: 30px;
    height: 30px;
    margin-top: 5px;
  }
}

:deep(.el-table__cell) {
  padding: 7px 0;
}
</style>
